<template>
	<view class="travel-order-item" @click="bindClick()">
		<view class="item-title-box">
			<view class="item-title">{{ order.title }}</view>
			<view class="item-status">{{ order.status }}</view>
		</view>
		<view class="item-content-box">
			<view class="item-content-cover">
				<image
					:src="order.cover"
					mode="aspectFill"
					@load="imgActive"
					style="height:140upx;background-color: #DDDDDD;"
					class="uni-lazyload"
					:class="active ? 'active' : ''"
				></image>
			</view>
			<view class="item-content">
				<view class="item-content-info">{{ order.content }}</view>
				<view class="item-content-ctime">{{ order.ctime }}</view>
				<view class="item-content-price">
					<view class="price-show">
						{{ order.price }}
						<view class="unit">A积分</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		order: {
			type: Object,
			default: function(e) {
				return {
					title: '加载中...',
					content: '---',
					price: '--'
				};
			}
		}
	},
	data() {
		return {
			active: false
		};
	},
	methods: {
		bindClick() {
			this.$emit('click');
		},
		imgActive() {
			this.active = true;
		}
	}
};
</script>

<style>
.uni-lazyload {
	opacity: 0;
	transition: all 0.3s ease-in-out;
	height: 100%;
}
.uni-lazyload.active {
	opacity: 1;
	transition: all 0.3s ease-in-out;
}
.travel-order-item {
	background-color: #ffffff;
	border-radius: 12upx;
	margin-bottom: 30upx;
}
.travel-order-item .item-title-box {
	flex-direction: row;
	justify-content: space-between;
	border-bottom: 1px solid #eee;
	padding: 20upx 30upx;
}
.travel-order-item .item-title-box .item-title {
	font-weight: bold;
	font-size: 120%;
}
.travel-order-item .item-content-box {
	padding: 30upx;
	flex-direction: row;
}
.travel-order-item .item-content-box .item-content-cover {
	width: 25%;
	padding: 10upx;
	border-radius: 6px;
	overflow: hidden;
	padding-left: 0;
}
.travel-order-item .item-content-box .item-content-cover image {
	width: 100%;
	height: 140upx;
	border-radius: 6px;
}
.travel-order-item .item-content-box .item-content .item-content-info {
	line-height: 120%;
	padding-top: 10upx;
}
.travel-order-item .item-content-box .item-content view {
	color: #666;
}
.travel-order-item .item-content-box .item-content .item-content-price .price-show {
	font-weight: bold;
	font-size: 120%;
	color: #0853C3;
}
</style>
